<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4096ff',
                        success: '#52c41a',
                        warning: '#faad14',
                        danger: '#ff4d4f',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#dcdfe6',
                            400: '#c0c4cc',
                            500: '#909399',
                            600: '#606266',
                            700: '#303133',
                            800: '#1e1e1e',
                        },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        card: '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {opacity: '0'},
                            '100%': {opacity: '1'},
                        },
                        slideUp: {
                            '0%': {transform: 'translateY(20px)', opacity: '0'},
                            '100%': {transform: 'translateY(0)', opacity: '1'},
                        }
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .user-card {
                @apply bg-white rounded-xl shadow-card p-6 mb-6 transition-all duration-300 hover:shadow-card-hover transform hover:-translate-y-1;
            }

            .avatar-container {
                @apply relative mb-6;
            }

            .avatar {
                @apply w-24 h-24 md:w-32 md:h-32 rounded-full object-cover border-4 border-white shadow-lg mx-auto;
            }

            .info-item {
                @apply flex items-center justify-between py-3 border-b border-neutral-100 last:border-0;
            }

            .info-label {
                @apply text-sm font-medium text-neutral-500 w-1/3;
            }

            .info-value {
                @apply text-base text-neutral-800 w-2/3 font-medium;
            }

            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }

            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-lg;
            }

            .btn-secondary {
                @apply bg-neutral-200 hover:bg-neutral-300 text-neutral-700 font-medium py-2.5 px-6 rounded-lg transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-10 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-neutral-700">面试助手</h1>
        </div>
        <nav>
            <ul class="flex space-x-6">
                <li><a href="/view/quesList.html" class="text-neutral-600 hover:text-primary transition-colors"><i
                        class="fa fa-list-alt mr-1"></i>我的题库</a></li>
                <li><a href="/view/chicken.html" class="text-neutral-600 hover:text-primary transition-colors"><i
                        class="fa fa-home mr-1"></i>我的小助手</a></li>
                <li><a href="/view/userInfo.html" class="text-primary font-medium border-b-2 border-primary pb-1"><i
                        class="fa fa-cog mr-1"></i>个人主页</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="container mx-auto px-4 py-12 max-w-4xl animate-fade-in">
    <!-- 页面标题 -->
    <div class="mb-10 text-center">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-800">个人信息</h2>
        <p class="text-neutral-500 mt-2">查看和管理你的个人资料</p>
    </div>

    <!-- 用户信息卡片 -->
    <div id="userCard" class="user-card animate-slide-up" style="animation-delay: 0.1s">
        <div class="avatar-container flex flex-col items-center">
            <div class="absolute -top-2 -right-2 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg">
                <i class="fa fa-user"></i>
            </div>
            <img src="" alt="用户头像" id="avatar" class="avatar">
            <h3 id="username" class="text-xl font-bold text-neutral-800 mt-4"></h3>
            <p id="jobInterest" class="text-neutral-500 text-sm mt-1"></p>
        </div>

        <div class="mt-6 space-y-1">
            <div class="info-item">
                <span class="info-label">昵称：</span>
                <span class="info-value" id="nickName"></span>
            </div>

            <div class="info-item">
                <span class="info-label">手机号：</span>
                <span class="info-value" id="phone"></span>
            </div>

            <div class="info-item">
                <span class="info-label">邮箱：</span>
                <span class="info-value" id="email"></span>
            </div>

            <div class="info-item">
                <span class="info-label">性别：</span>
                <span class="info-value" id="gender"></span>
            </div>

            <div class="info-item">
                <span class="info-label">年龄：</span>
                <span class="info-value" id="age"></span>
            </div>

            <div class="info-item">
                <span class="info-label">技术栈：</span>
                <div class="info-value flex flex-wrap gap-2" id="techTackContainer"></div>
            </div>

            <div class="info-item">
                <span class="info-label">注册时间：</span>
                <span class="info-value" id="createTime"></span>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="text-center mt-8 flex flex-wrap justify-center gap-4 animate-slide-up" style="animation-delay: 0.2s">
        <button id="editBtn" class="btn-primary flex items-center">
            <i class="fa fa-pencil-square-o mr-2"></i> 编辑资料
        </button>
        <button id="logoutBtn" class="btn-secondary flex items-center">
            <i class="fa fa-sign-out mr-2"></i> 退出登录
        </button>
    </div>
</main>

<footer class="bg-neutral-800 text-neutral-300 py-8 mt-16">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-graduation-cap text-primary text-xl"></i>
                    <span class="text-lg font-bold text-white">面试助手</span>
                </div>
                <p class="text-sm mt-2">助力你的技术面试准备</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-github text-xl"></i></a>
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-twitter text-xl"></i></a>
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-linkedin text-xl"></i></a>
            </div>
        </div>
        <div class="border-t border-neutral-700 mt-6 pt-6 text-center text-sm">
            &copy; 2025 面试助手 版权所有
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script src="../js/userInfo.js"></script>
</body>
</html>